<template>
  <div class="data-operation clearfix">
    <div class="input-box">
      <span class="input-info"> 状态：</span>
      <el-select v-model="state">
        <el-option label="全部" value="all" />
        <el-option label="显示" value="display" />
        <el-option label="不显示" value="none" />
      </el-select>
    </div>
    <div class="input-box">
      <span class="input-info"> 名称：</span>
      <el-input
        class="search-name"
        v-model="searchName"
        placeholder="请输入名称"
      >
        <template #append
          ><el-icon><Search /></el-icon
        ></template>
      </el-input>
    </div>
    <div class="clear"></div>
    <el-button type="primary" class="add-btn" @click="addType"
      >新增产品分类</el-button
    >
    <el-dialog
      v-model="showAdd"
      destroy-on-close
      title="创建产品分类"
      width="50%"
      align-center
    >
      <AddType></AddType>
      <template #footer>
        <el-button type="primary" @click="showAdd = false"> 确认 </el-button>
        <el-button @click="showAdd = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称" width="240">
      <template #default="scope">
        <el-icon class="open-btn"><ArrowRight /></el-icon>
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column prop="properties" label="类型" width="150" />
    <el-table-column prop="typeIcon" label="分类图标" width="80">
      <template #default="scope">
        <el-image
          style="height: 30px"
          :src="scope.row.typeIcon"
          :zoom-rate="1"
          :preview-teleported="true"
          :preview-src-list="[scope.row.typeIcon]"
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column prop="order" label="排序" width="150" />
    <el-table-column prop="isShow" label="状态">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isShow"
          active-text="显示"
          inactive-text="隐藏"
          inline-prompt
          :active-value="1"
          :inactive-value="0"
          :before-change="changeState"
        />
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default>
        <el-button link type="primary" size="small">添加子目录</el-button>
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import AddType from "./AddType.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { getGoodsSort, modifyGoodsSort } from "@/api/goods";

let state = ref("all");
let searchName = ref();
let tableData: any = ref();
let showAdd = ref(false);
//点击添加分类
const addType = () => {
  showAdd.value = true;
};
//修改分类显示状态
const changeState = () => {
  modifyGoodsSort().then((res) => {
    if (res.data.code === 200) {
      ElMessage({
        message: "修改成功",
        type: "success",
        duration: 1000,
      });
    } else {
      ElMessage({
        message: "修改失败",
        type: "error",
        duration: 1000,
      });
    }
  });
  return modifyGoodsSort();
};
//获取分类列表数据
getGoodsSort().then((res) => {
  if (res.data.code === 200) {
    tableData.value = res.data.data;
  }
});
</script>

<style scoped lang="scss">
.data-operation {
  padding: 20px;
  border-bottom: 1px solid rgb(225, 222, 222);
  .input-box {
    display: flex;
    height: 32px;
    float: left;
    margin-right: 15px;
    .input-info {
      width: 50px !important;
      font-size: 14px;
      line-height: 32px;
      font-weight: 700;
    }
    :deep(.el-select) {
      width: 300px !important;
    }
    :deep(.el-input) {
      width: 300px !important;
    }
    :deep(.el-input__inner) {
      font-size: 12px;
      font-weight: 300 !important;
    }
    .search-name {
      float: right;
    }
  }
  .add-btn {
    margin-top: 20px;
  }
}
:deep(.el-dialog__body) {
  padding-bottom: 0;
  border-top: 1px solid rgb(236, 230, 230);
  .el-form-item__label {
    width: 140px !important;
    font-size: 14px;
    line-height: 32px;
    font-weight: 700;
  }
}
:deep(.el-dialog__footer) {
  text-align: left;
  padding-left: 165px;
  .el-button {
    font-size: 14px;
    padding: 18px 20px;
  }
}
.type-icon {
  height: 30px;
}
:deep(.is-text) {
  margin: 0 5px;
}
.open-btn {
  margin-right: 10px;
}
</style>
